<template>
  <div class="order">
    <!-- 头部 -->
    <van-nav-bar title="我的订单" left-text="返回" :fixed="true" left-arrow @click-left="onClickLeft" />

    <!-- 收货人地址 -->
    <van-contact-card
      :type="addresscardType"
      :name="address_name"
      :tel="address_phone"
      @click="chooseAddress"
      add-text="选择收货地址"
      class="contact-card"
    />

    <!-- 单元格 -->
    <van-cell-group style="margin-top:0.5rem">
      <van-cell title="送达时间" :value="arriveDate" @click.prevent="showDatePopup" is-link />
      <!-- 订单缩图 -->
      <van-cell value="内容" is-link :center="true">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <img src="./images/detail1.jpg" alt style="width:3rem" />
          <img src="./images/detail1.jpg" alt style="width:3rem" />
          <img src="./images/detail1.jpg" alt style="width:3rem" />
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top:0.5rem">
      <van-cell title="支付方式" value="微信" />
    </van-cell-group>

    <van-cell-group style="margin-top:0.5rem">
      <van-cell title="备注">
        <input type="text" placeholder="选填, 备注您的需求 !" />
      </van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top:0.5rem">
      <van-cell title="商品金额" value="￥50.00" />
      <van-cell title="配送费" value="￥0.00" />
    </van-cell-group>

    <van-submit-bar :price="3050" label="实付" button-text="提交订单" @submit="onSubmit" />

    <!-- 弹出日期组件 -->
    <van-popup v-model="dateShow" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="onDateCancel"
        @confirm="onDateConfirm"
      />
    </van-popup>

    <!-- 子组件 -->
    <transition name="router-slider" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>


<script>
import PubSub from "pubsub-js";
import Moment from "moment";
export default {
  name: "order",

  data() {
    return {
      // 地址
      chosenContactId: null,
      addresscardType: "add", // 地址卡片类型
      address_name: null, // 收货人
      address_phone: null, // 收货电话
      address_id: null, // 收货人地址ID

      // 日期
      dateShow: false, // 显示隐藏 , 默认不展示
      minDate: new Date(),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),

      // 送达时间
      arriveDate: "请选择送达时间"
    };
  },
  mounted() {
    // 接收用户选择的收货地址
    PubSub.subscribe("userAddress", (msg, address) => {
      if (msg === "userAddress") {
        // console.log(address);
        // 修改卡片类型
        this.addresscardType = "edit";
        this.address_name = address.name;
        this.address_phone = address.tel;
        this.address_id = address.address_id;
      }
    });
  },
  computed: {
    cardType() {
      return this.chosenContactId !== null ? "edit" : "add";
    }
  },
  methods: {
    //点击返回
    onClickLeft() {
      this.$router.back();
    },
    // 添加联系人
    chooseAddress() {
      this.$router.push("/confirmOrder/myAddress");
    },
    //提交订单
    onSubmit() {},

    // 展示日期组件
    showDatePopup() {
      this.dateShow = true;
    },

    //取消日期组件
    onDateCancel() {
      this.dateShow = false;
    },
    //确认日期组件
    onDateConfirm(value) {
      this.dateShow = false;
      this.arriveDate = Moment(value).format("YYYY-MM-DD hh:mm");
      // console.log(value);
    }
  },

  beforeCreate() {
    PubSub.unsubscribe("backToMyaddress");
  }
};
</script>


<style lang="less" scoped>
.order {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f5f5f5;

  .contact-card {
    margin-top: 4rem;
  }
}

// 转场动画
.router-slider-enter-active,
.router-slider-leave-active {
  transition: all 0.2s;
}

.router-slider-enter,
.router-slider-leave-active {
  transform: translate3d(2rem, 2rem, 0);
  opacity: 0;
}
</style>